<template>
  <div>
    <h1>插槽</h1>
    <Item>
      <template #qwe>
        <span>hello</span>
      </template>
      <template v-slot:abc>
        <span>world</span>
      </template>
      <p>这是没有指定插槽名称的数据</p>
    </Item>
    <hr>
    <Box>
      <template #default="{ str, qwe }">
        <p>这是在父组件中使用父组件的数据：{{ msg }}</p>
        <p>这是在父组件中使用子组件的数据：{{ str }}</p>
        <p>这是在父组件中使用子组件的数据：{{ qwe }}</p>
      </template>
    </Box>
  </div>
</template>

<script>
import Item from "@/components/Item.vue"
import Box from "@/components/Box.vue"
export default {
  components:{
    Item, Box
  },
  data(){
    return {
      msg:"这是父组件"
    }
  }
}
</script>